<template>
	<div class="homepage">
		<!-- 搜索框 -->
		<router-link to="/search">
			<van-search shape="round" background="#07c160" placeholder="搜索" />
		</router-link>

		<!-- 可拖动导航条 -->
		<van-tabs v-model="active" @click="switchTab">
			<van-tab v-for="item in cate" :key="item._id" :title="item.name">
			</van-tab>
		</van-tabs>

		<!-- 容器 -->
		<div class="homepage_box" style="padding-bottom: 50px;">
			<van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
			
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getArtList" :immediate-check='false'>
				<!-- loading 是否正在加载中 --><!-- 初始化后 会默认执行一次getArtList  所以要把immediate-check改为false--><!-- 下拉加载只触发一回 因为vant加载过一次后loding值会改为ture --><!-- immediate-check 是否在组件初始化以后立刻执行一次 @load="getArtList" -->

				<!-- 懒加载 -->
				<div class="homepage-image" v-for="(item,index) in articleList" :key="index" @click="$router.push({path:'/article',query:{article_id:item._id,title:item.title}})">
					<h3>{{item.title}}</h3>
					<div :class="{hide:item.poster_type==1,rightImg:item.poster_type==2,acticleImg:item.poster_type==3}">
						<img v-for="img in item.imageSrc" :src="img" />
					</div>

					<p>{{item.author}} 评论</p>
				</div>
			</van-list>
			<!-- <div class="aaa" @click="backTop" v-show="goTopShow">
				返回<br>顶部
			</div> -->
			
			</van-pull-refresh>
		</div>
	</div>
</template>

<style lang="less">
	a {
		color: #000;
	}
	// .homepage-image .hide{
		
	// }
	// .aaa{
	// 	width: 50px;
	// 	height: 50px;
	// 	background-color: #00FFFF;
	// 	position: fixed;
	// 	right: 30px;
	// 	bottom: 30px;
	// 	display: none;
	// }
	.homepage-image h3{
		font-size: 18px;
		padding: 5px;
	}
	.homepage-image p{
		font-size: 14px;
		height: 20px;
	}
	.homepage p {
		margin: 5px 0;
	}

	.homepage-image:last-child {
		margin-bottom: 80px;
	}

	.homepage .van-tabs__line {
		background-color: @color;
		margin-bottom: 3px;
		width: 30px;
	}

	.homepage .van-tabs__wrap--scrollable {
		border-bottom: 1px solid #ddd;
	}

	.homepage .van-tabs__wrap--scrollable .van-tab {
		border-left: 1px solid #ddd;
	}

	.homepage .van-tabs__nav--line.van-tabs__nav--complete {
		padding-left: 0;
	}

	.homepage .van-search__content--round {
		background-color: #66d79d;
	}

	.homepage .van-field__body input {
		color: #fff;
	}

	// 更改搜索框内  placeholder的颜色
	.homepage .van-field__body input:-moz-placeholder,
	.homepage textarea:-moz-placeholder {
		color: #fff;
	}

	.homepage .van-field__body input:-ms-input-placeholder,
	.homepage textarea:-ms-input-placeholder {
		color: #fff;
	}

	.homepage .van-field__body input::-webkit-input-placeholder,
	.homepage textarea::-webkit-input-placeholder {
		color: #fff;
	}

	.homepage .van-field__left-icon .van-icon,
	.homepage .van-field__right-icon .van-icon {
		color: #fff;
	}

	.homepage-image {
		border-bottom: 1px solid #ddd;
	}

	.homepage-image img {
		width: 100%;
	}

	.homepage-image h3,
	.homepage-image p{
		text-align: left;
		margin-left: 20px;

		
		width: 90%;
		margin: 0 auto;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.homepage-image p{
		font-size: 12px;
		height: 15px;
		line-height: 15px;
		color: #7a7a7a;
	}
</style>

<script>
	import {
		List,
		PullRefresh
	} from 'vant';

	// 封装成组件的写法
	import {
		getCateList,
		getArticleList
	} from '../api/home.js'
	
	export default {
		name: 'HomePage',
		data() {
			return {
				active: 0,
				cate: [], //存放分类数据
				active_cate_id: '', // 当前被选中的那一项的分类id
				articleList: [], //文章列表
				loading: false, //是否正在加载中 
				finished: false, //是否全部加载完毕了
				skip:0,//从哪个数据开始拿
				limit:20,//一次拿几个数据
				// goTopShow:false,//默认回到顶部的按钮 不显示
				isRefresh:false,//是否正在刷新
			}
		},
		components: {
			[List.name]: List,
			[PullRefresh.name]:PullRefresh
		},
		mounted() {
			this.getCate()
			// this.getCateList()
			
			// 监听 滚动条的高度
			// 回到顶部
			// window.addEventListener("scroll",this.scroll_top,true)
		},
		methods: {
			// 下拉刷新功能
			onRefresh(){
				//this.articleList=[];//提前将数据清空 会造成闪屏的情况  用户体验不太好  解决方案：不提前清空 到最后一步的时候再把数据清空
				this.skip=0;// 点击切换的时候 需要让skip清零
				this.finished=false;//切换以后 finished状态需要重置
				this.getArtList(true);
			},
			
			// 回到顶部
			// scroll_top() {
			// 	if (this.scroll_top > 90) {
			// 		this.goTopShow = true;
			// 	} else {
			// 		this.goTopShow = false;
			// 	}
			// },
			// backTop(){
			// 	this.scroll_top=0
			// },
			
			// 分类切换
			switchTab() {
				this.active_cate_id = this.cate[this.active]._id; // 获取到目前高亮的栏目的id 
				this.articleList=[];
				this.skip=0;// 点击切换的时候 需要让skip清零
				this.finished=false;//切换以后 finished状态需要重置
				this.getArtList();
				// this.getArticleList();
			},
			// getCateList(){
			// 	this.$http.post('/api/get_cate_list').then(res=>{
			// 		console.log(res)
			// 		// 对cate进行了更改  vue视图更新
			// 		this.cate=res.data.data
			// 		// 拿到分类数据后  去取第一个栏目的id
			// 		this.active_cate_id=this.cate[this.active]._id;
			// 		this.getArticleList();
			// 	})
			// },
			// // 获取文章列表
			// getArticleList(){
			// 	this.$http.post('/api/get_article_list',{
			// 		cate_id:this.active_cate_id
			// 	}).then(res=>{
			// 		console.log(res)
			// 		this.articleList=res.data.data
			// 	})
			// }

			getCate() {
				getCateList().then(res => {
					console.log(res)
					// 对cate进行了更改  vue视图更新
					this.cate = res.data

					// 拿到分类数据后  去取第一个栏目的id

					this.active_cate_id = this.cate[this.active]._id; // 获取到目前高亮的栏目的id
					this.getArtList();
				})
			},
			// 获取文章列表
			getArtList(flag) {
				let {
					active_cate_id,
					skip,
					limit
				} = this;
				getArticleList({
					cate_id: active_cate_id,
					skip,
					limit
				}).then((res) => {
					console.log(res)
					
					if(flag){
						// 如果是刷新操作
						this.isRefresh=false;//flag为真时  结束下拉刷新的转圈
						this.articleList=res.data;//刷新操作 相当于  把数据清空  替换成新的
					}else{
						// 如果不是刷新  会一直累加
						this.articleList.push(...res.data);//新数据要和老数据进行拼接
					}
						
					let len=this.articleList.length;//算出push完以后 服务器返回的数据的数量
						
					// 判断数据加载完了吗 如果加载完了  把finished改为true 反之 把loding改为false
					if(len>=res.count){
						this.finished=true;//数据加载完了 再滑也别触发事件了
					}else{
						this.skip=len;//让skip更新
						this.loading=false;//我可以继续去加载了
					}
					
				})
			}

		}
	}
</script>
